<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <style>
* {margin: 0;padding: 0;}
.left {float: left;}
.right {float: right}
ul,ol {list-style: none;}
.clearfix {}
.clearfix:after {
content:"";
height: 0;visibility: hidden;
display: block;
clear: both;
}
.orderlist-container {width: 1200px;margin: 0 auto}
.orderlist-table {width: 100%;border-collapse: collapse;}
.detail-col {width: 700px;}
.receiver-col {width: 125px;}
.amount-col {width: 125px;}
.state-col {width: 125px;}
.operate-col {width: 125px;}
.orderlist-table thead tr th {background: #EEEEEE;height: 30px;font-size: 14px;line-height: 30px;font-weight: 400;color: #333;}
.orderlist-table tbody {}
.orderlist-table tbody td {border: 1px solid #e5e5e5;}

.row-sep {height: 20px;}
.row-tb {background: #EEEEEE;height: 30px;font-size: 14px;line-height: 30px;}
.row-dealtime , .row-ordernum i{color:#aaa;}
.row-dealtime {margin-right: 30px;padding-left: 10px;}
.goods-items {width: 480px;margin-right: 30px;padding: 12px;}
.gds-img {width: 60px;height: 60px;margin-right: 20px;}
.gds-img img {width: 100%;display: block;}
.gds-msg {width:400px;margin-top: 10px;color: #333;font-size: 15px; }
.goods-number {margin-top: 25px;}
.col-receiver h4 {text-align: center;}
.col-amount {font-size: 14px;line-height: 30px;color: #aaa;text-align: center}
.col-amount hr {width: 70%;margin: 0 auto;}

.col-state  {line-height: 30px;text-align: center}
.col-state span {color: #aaa;font-size: 14px;}

.col-operate {text-align: center}
.opt-pay {display: inline-block;border:1px solid #F73809;font-size: 14px;line-height: 30px;width: 50px;height: 30px;color: #F73809;text-align: center;}
.opt-cancel {font-size: 15px;line-height: 30px;color: #333;font-weight: 400;}
    </style>
</head>
<body>

<div class="orderlist-container">
    <table class="orderlist-table">
        <colgroup>
            <col class="detail-col">
            <col class="receiver-col">
            <col class="amount-col">
            <col class="state-col">
            <col class="operate-col">
        </colgroup>
        <thead>
            <tr>
                <th>订单详情</th>
                <th>收货人</th>
                <th>金额</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row-sep">
                <td colspan="5"></td>
            </tr>
            <tr class="row-tb">
                <td colspan="5">
                    <span class="row-dealtime">2016-09-01 15:32:26</span>
                    <span class="row-ordernum"><i>订单号：</i>xxxxxxxxxxxx</span>
                </td>
            </tr>
            <tr class="row-bd">
                <td>
                    <div class="goods-items left">
                        <div class="gds-img left">
                            <img src="images/img.png" />
                        </div>
                        <div class="gds-msg left">
                            海澜之家/Heilan Home2016夏季热卖男装圆领休闲短袖T恤HNTBJ2N223A 藏青花纹(N7)
                        </div>

                    </div>
                    <div class="goods-number left"> *2 </div>
                </td>
                <td>
                    <div class="col-receiver">
                        <h4>xxxx</h4>
                    </div>

                </td>
                <td>
                    <div class="col-amount">
                        <span>总额 ¥2676.00</span>
                        <hr />
                        <span>在线支付</span>
                    </div>
                </td>
                <td>
                    <div class="col-state">
                        <span>已完成 </span>
                    </div>
                </td>
                <td>
                    <div class="col-operate">
                        <span class="opt-pay">付款</span>
                        <h4 class="opt-cancel">取消订单</h4>
                    </div>
                </td>
            </tr>
            <tr>

            </tr>
            <tr></tr>
        </tbody>
    </table>
</div>
</body>
</html>